<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#btn_li_list{
				
				list-style: none;
			}
			#btn_li_list li,#btn_mod div{
				float: left;
				width: 60px;
				background: rgb(204,204,204);
				height: 30px;
				margin-left: 6px;
				text-align: center;
				line-height: 30px;
				color: rgb(102,102,102);
			}
			#btn_mod{
				width: 480px;
				margin: 20px auto 0;
				overflow: hidden;
			}
			#img_box img{
				width: 400px;
				height: 300px;
				float: left;
				
			}
			#img_box{
				width: 400px;
				height: 300px;
				margin:20px auto 0;
				position: relative;
				overflow: hidden;
			}
			#img_scroll{
				height: 400px;
				position: absolute;
				left: 0;
				overflow: hidden;
				-webkit-transition: left 0.5s;
			}
		</style>
	</head>
	<body>
		<div id="btn_mod">	
			<div id="pre">
				上一页
			</div>
			<ul id="btn_li_list">
				<li style="background: rgb(153,153,153);">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			<div id="next">
				下一页
			</div>
		</div>
		<!--图片-->
			<div id="img_box">
				<div id="img_scroll">
					<img src="img/1.jpg"/>
					<img src="img/2.jpg"/>
					<img src="img/3.jpg"/>
					<img src="img/4.jpg"/>
					<img src="img/5.jpg"/>
				</div>
			</div>
	</body>
	<script type="text/javascript">
		//获取要用的元素
		//上一页
		var preBtn = document.getElementById("pre");
		//下一页
		var nextBtn = document.getElementById("next");
		//1，2，3，4
		var ulList = document.getElementById("btn_li_list");
		var liBtnArray = ulList.getElementsByTagName("li");
		//滚动div快
		var scrollDiv = document.getElementById("img_scroll");
		//获取滚动 div 块下的所有img标签
		var imgArray = scrollDiv.getElementsByTagName("img");
		
		//设置滚动 div 块的宽度
		scrollDiv.style.width = 400 * imgArray.length + "px";
		
		//定义用来记录滑动图片的位置
		var scrollIndex = 0;
		var timer = null;//设置定时器
		function init(){
			timer = setInterval(function(){
				nextfun();
			},2000)
		}
		init();
		preBtn.onclick = function(){
			scrollIndex--;
			scrollIndex = scrollIndex < 0 ? 4 : scrollIndex;
			scrollToIndex(scrollIndex);
		}
		nextBtn.onclick = function(){
			nextfun();
		}
		//计算下一张的函数
		function nextfun(){
			scrollIndex++;
			scrollIndex = scrollIndex > imgArray.length - 1 ? 0 : scrollIndex;
			scrollToIndex(scrollIndex);
		}
		//滑动到指定位置
		function scrollToIndex(index){
			scrollDiv.style.left = index * -400 + "px";
			//改变上面1.2.3.4对应按钮的颜色
			for (var i = 0;i < liBtnArray.length;i++) {
				liBtnArray[i].style.background = "rgb(204,204,204)";
			}
			liBtnArray[index].style.background = "rgb(153,153,153)";
		}
		//光标移动到上一页和下一页的时候停止自动滚动
		preBtn.onmouseover = function(){
			clearInterval(timer);
		}
		nextBtn.onmouseover = function(){
			clearInterval(timer);
		}
		//光标移动到上一页和下一页的时候重新开始自动滚动
		preBtn.onmouseout = function(){
			init();
		}
		nextBtn.onmouseout = function(){
			init();
		}
		for(var i = 0;i < liBtnArray.length;i++){
			liBtnArray[i].index = i;
			liBtnArray[i].onclick = function(){
				scrollIndex = this.index;
				scrollToIndex(this.index);	
			}
		}
	</script>
</html>